<template>
  <view class="my-ratings">
    <view class="rating-list">
      <uni-card v-for="rating in ratingList" 
                :key="rating.id"
                :title="rating.service_title"
                :extra="formatDate(rating.created_at)">
        <view class="rating-content">
          <uni-rate :value="rating.rating" size="18" readonly/>
          <text class="comment">{{rating.comment}}</text>
        </view>
        
        <!-- 操作按钮 -->
        <template v-slot:actions>
          <button size="mini" type="warn" @click="handleDelete(rating)">删除</button>
        </template>
      </uni-card>
    </view>
    
    <!-- 空状态 -->
    <view v-if="ratingList.length === 0" class="empty-state">
      <text>暂无评价记录</text>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'

export default {
  data() {
    return {
      ratingList: []
    }
  },
  
  onShow() {
    this.getRatingList()
  },
  
  methods: {
    // 获取评价列表
    async getRatingList() {
      try {
        const res = await request({
          url: '/user/ratings',
          method: 'GET'
        })
        if(res.statusCode === 200) {
          this.ratingList = res.data.data
        }
      } catch(e) {
        console.error('获取评价列表失败:', e)
      }
    },
    
    // 删除评价
    handleDelete(rating) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条评价吗？',
        success: async (res) => {
          if(res.confirm) {
            try {
              const res = await request({
                url: `/ratings/${rating.id}`,
                method: 'DELETE'
              })
              if(res.statusCode === 200) {
                uni.showToast({
                  title: '删除成功'
                })
                this.getRatingList()
              }
            } catch(e) {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString()
    }
  }
}
</script>

<style lang="scss">
.my-ratings {
  padding: 20rpx;
  
  .rating-list {
    .rating-content {
      margin: 20rpx 0;
      
      .comment {
        display: block;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
  
  .empty-state {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
  }
}
</style> 